<template>
  <div class=''>
    <div class="formheader">
      <span>说明:目前支持学科和关键字搜索</span>
      <el-button type="success" icon="el-icon-edit" @click="hJumpToAdd">新增试题</el-button>
    </div>
    <div class="formbody">
      <el-form ref="form" :model="form" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="学科" prop="subjectID">
                <el-select size="small" v-model="form.subjectID" placeholder="请选择" @change="getDirectory">
                  <el-option v-for='(item, idx) in discipline' :label="item.label" :value="item.value" :key="idx"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="二级目录"  prop="catalogID">
                <el-select size="small" v-model="form.catalogID" placeholder="请选择">
                  <el-option v-for='(item, idx) in directorys' :label="item.label" :value="item.value" :key="idx"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="标签" prop="tags">
                <el-select size="small" v-model="form.tags" placeholder="请选择">
                  <el-option v-for='(item, idx) in tags' :label="item.label" :value="item.value" :key="idx"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="关键字" prop="keyword">
                <el-input size="small" v-model.trim="form.keyword" placeholder="根据题干搜索"></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="试题类型" prop="questionType">
                <el-select size="small" v-model="form.questionType" placeholder="请选择">
                  <el-option v-for='(item, idx) in thequestionType' :label="item.label" :value="item.value" :key="idx"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="难度"  prop="difficulty">
                <el-select size="small" v-model="form.difficulty" placeholder="请选择">
                  <el-option v-for='(item, idx) in thedifficulty' :label="item.label" :value="item.value" :key="idx"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="方向" prop="direction">
                <el-select size="small" v-model="form.direction" placeholder="请选择">
                  <el-option v-for='(item, idx) in thedirection' :label="item" :value="item" :key="idx"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="录入人" prop="creatorID">
                <el-select size="small" v-model="form.creatorID" placeholder="请选择">
                  <el-option v-for='(item, idx) in users' :label="item.username" :value="item.id" :key="idx"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="题目注释" prop="remarks">
                <el-input size="small" v-model.trim="form.remarks"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="企业简介" prop="shortName">
                <el-input size="small" v-model.trim="form.shortName"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-row>
                <el-col :span="14">
                  <div class="grid-content bg-purple">
                    <el-form-item label="城市" prop="province">
                      <el-select
                        class="filter-item"
                        size="small"
                        placeholder="请选择"
                        v-model="form.province"
                        @keyup.enter="handleFilter"
                        @change="handleProvince"
                        filterable>
                        <el-option v-for="item in citySelect.province" :key="item" :label="item" :value="item"></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="10">
                  <div class="grid-content bg-purple-light">
                    <el-form-item prop="city" label-width="10px">
                      <el-select
                        class="filter-item"
                        size="small"
                        v-model="form.city"
                        placeholder="请选择"
                        @keyup.enter="handleFilter"
                        filterable
                      >
                        <el-option v-for="item in citySelect.cityDate" :key="item" :label="item" :value="item"></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple thebtn">
              <el-form-item>
                <el-button size="small" @click="resetForm('form')">清除</el-button>
                <el-button type="primary" @click="onSubmit" size="small">搜索</el-button>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import { simple as subjectlist } from '@/api/hmmm/subjects'
import { simple as userlist } from '@/api/base/users'
import { simple as directoryslist } from '@/api/hmmm/directorys'
import { simple as tagslist } from '@/api/hmmm/tags'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { difficulty, questionType, direction } from '@/api/hmmm/constants'
export default {
  name: 'questions-form',
  // props: ['value'],
  data () {
    return {
      form: {
        subjectID: '',
        questionType: '',
        difficulty: '',
        tags: '',
        province: '',
        city: '',
        keyword: '',
        remarks: '',
        shortName: '',
        direction: '',
        creatorID: '',
        catalogID: ''
      },
      discipline: [],
      directorys: [],
      thedifficulty: [],
      thequestionType: [],
      thedirection: [],
      tags: [],
      users: [],
      page: 1,
      pagesize: 10,
      citySelect: {
        province: [],
        cityDate: []
      },
      timer: null
    }
  },
  created () {
    this.getList()
    this.getCityData()
    this.theDifficulty()
    this.theQuestionType()
    this.theDirection()
    this.getName()
  },
  computed: {
    difficulty () {
      return difficulty
    },
    questionType () {
      return questionType
    },
    direction () {
      return direction
    }
  },
  methods: {
    buildParams () {
      const { subjectID, questionType, difficulty, tags, province, city, keyword, remarks, shortName, direction, creatorID, catalogID } = this.form
      const data = {
        subjectID: subjectID || null,
        questionType: questionType || null,
        difficulty: difficulty || null,
        tags: tags || null,
        province: province || null,
        city: city || null,
        keyword: keyword || null,
        remarks: remarks || null,
        shortName: shortName || null,
        direction: direction || null,
        creatorID: creatorID || null,
        catalogID: catalogID || null,
        page: 1,
        pagesize: null
      }
      return data
    },
    // 设置节流阀,控制连续点击发送请求
    onSubmit () {
      if (this.timer) return
      this.timer = setTimeout(() => {
        const data = this.buildParams()
        this.$emit('input', data)
        this.$emit('myEvent')
        this.timer = null
      }, 500)
    },
    // 学科
    async getList () {
      try {
        const { data: res } = await subjectlist()
        this.discipline = res
      } catch (err) {
        console.log(err)
      }
    },
    // 学科change事件
    async getDirectory (itemid) {
      // 目录列表
      try {
        const { data: res } = await directoryslist({ subjectID: itemid })
        this.form.catalogID = ''
        this.directorys = res
      } catch (err) {
        console.log(err)
      }
      // 标签列表
      try {
        const { data: res1 } = await tagslist({ subjectID: itemid })
        this.form.tags = ''
        this.tags = res1
      } catch (err) {
        console.log(err)
      }
    },
    // 难度
    theDifficulty () {
      this.thedifficulty = difficulty
    },
    // 题型
    theQuestionType () {
      this.thequestionType = questionType
    },
    // 方向
    theDirection () {
      this.thedirection = direction
    },
    // 录入人
    async getName () {
      try {
        const { data: res } = await userlist()
        this.users = res
      } catch (err) {
        console.log(err)
      }
    },
    // 城市
    getCityData: function () {
      this.citySelect.province = provinces()
    },
    handleProvince: function (e) {
      this.form.city = ''
      this.citySelect.cityDate = citys(e)
    },
    // 新增试题
    hJumpToAdd () {
      this.$router.push('/questions/new')
    },
    // 清空表单
    resetForm (form) {
      this.$refs[form].resetFields()
      this.citySelect.cityDate = []
      // this.$emit('input', )
      // 点击清空时对应父组件中的数据也要改变为null
      for (const key in this.form) {
        this.form[key] = null
      }
      this.directorys = []
      this.tags = []
      this.$emit('input', this.form)
      // this.$emit('myclick', { isFirstPage: 1, isAll: 1 })
    }
  }
}
</script>

<style scoped lang='scss'>
  .formheader {
    margin-bottom:30px;
    span {
      font-size: 12px;
      color:rgb(255, 192, 203);
    }
    button {
      font-size: 12px;
      padding: 8px 15px;
      float: right;
      margin-bottom: 10px;
    }
  }
  .el-select {
     width: 100%;
  }
  .thebtn {
    text-align: right;
  }
</style>
